<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/self-checking.css" rel="stylesheet">

    <script src="../js/zepto-1.1.4.min.js"></script>
    
    <title>自检</title>
    
  </head>
  <body>
    <!-- 自检 -->
    <div class="self-checking-container">
        <div class="self-checking-head">
            <span class="self-checking-pre">返回</span>
            <p class="self-checking-num">1/20</p>
        </div>

        <div class="self-checking-con">
            <div class="self-floor">
                <div class="item-floor first-floor">
                    <p class="subject-num">01</p>
                    <p class="subject-con">题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题</p>
                </div>
    
                <div class="item-floor second-floor">
                    <p class="subject-num">02</p>
                    <p class="subject-con">题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题</p>
                </div>
            </div>
            
            <div class="subject-titles">
                <p class="subject-title">题目题目题目题目题目题目1</p> 
                <p class="subject-title">题目题目题目题目题目题目2</p> 
                <p class="subject-title">题目题目题目题目题目题目3</p> 
                <p class="subject-title">题目题目题目题目题目题目4</p> 
                <p class="subject-title">题目题目题目题目题目题目5</p>               
            </div>
        </div>
    </div>

    <script src="../js/remset.js"></script>

    <script>
        $(function() {
            var _h = $('.self-checking-con').height() - $('.subject-num').height() - $('.subject-con').height() - 30
            $('.subject-titles').css("height", _h + "px")

            $('.self-checking-pre').click(function() {
                history.go(-1)
            })



            
            $('.first-floor').click(function() {
                $('.first-floor').addClass('droptop')
        
                setTimeout(function() {
                    $('.first-floor').css('z-index', 9)
                    $('.second-floor').css('z-inex', 10)
                    $('.first-floor').removeClass('droptop')
                }, 2000)
            })

            $('.second-floor').click(function() {
                $('.second-floor').addClass('droptop')
        
                setTimeout(function() {
                    $('.first-floor').css('z-index', 10)
                    $('.second-floor').css('z-inex', 9)
                    $('.second-floor').removeClass('droptop')
                }, 2000)
            })

            setSubjectBg()

            // 设置bg
            function setSubjectBg() {
                var len = $('.subject-title').length

                var NUM = Math.floor((256 - 100) / len)
                var color = 245

                for(var i = 0; i < len + 1; i++) {
                    $('.subject-title:nth-child(' + i +')').css('background', 'rgb(' + color + ',' + color + ',' + color + ')')
                    color -= NUM
                }
            }
        })
    </script>
  </body>
</html>